<template>
	<div>
		<el-dialog
			title="内存/cpu使用情况"
			:visible.sync="dialogVisible"
			width="90%"
			:before-close="dialogClick"
		>
			<div class="CpuBox">
				<div class="cpu" >
					<div class="title">CPU使用率%</div>
					<div id="cpu"></div>
				</div>
				<div class="io" >
					<div class="title">内存使用率%</div>
					<div id="io"></div>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				
				<el-button type="primary" @click="dialogClick">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
import bus from 'common/bus.js';
import { Line } from '@antv/g2plot';

export default {
	props: {
		dialogVisible: Boolean,
		itemType: String,
		// dialogData: Array,
	},
	created() {},
	mounted() {},
	data() {
		return {
			ioLoading: false,
			cpuLoading: false,
			lineCpu: '',
			lineIo: '',
		};
	},
	methods: {
		dialogClick() {
			this.$emit('haldDialogfalse');
			this.lineCpu.destroy();
			this.lineIo.destroy();
		},
		initCpu() {
			
				fetch(
					'https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json'
				)
					.then((res) => res.json())
					.then((data) => {
						this.lineCpu = new Line('cpu', {
							data,
							padding: 'auto',
							xField: 'Date',
							yField: 'scales',
							xAxis: {
								tickCount: 5,
							},
							slider: {
								start: 0.1,
								end: 0.5,
							},
							width: 700
							
						});

						this.lineCpu.render();
					});
			
		},
		initIo() {
			
				fetch(
					'https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json'
				)
					.then((res) => res.json())
					.then((data) => {
						this.lineIo = new Line('io', {
							data,
							padding: 'auto',
							xField: 'Date',
							yField: 'scales',
							xAxis: {
								tickCount: 5,
							},
							slider: {
								start: 0.1,
								end: 0.5,
							},
							width: 700
							
							
						});

						this.lineIo.render();
					});
			
		},
		
	},
};
</script>
<style>
.CpuBox {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 100px;
}
.cpu {
	width: 90%;
	display: grid;
	grid-template-rows: auto;
	justify-items: center;
	row-gap: 30px;
	/* background: #695874; */
}
.io {
	width: 90%;
	display: grid;
	grid-template-rows: auto;
	justify-items: center;
	row-gap: 30px;
	/* background: #652147; */
}
</style>
